{% extends "base.html" %}

{% block title %}Flash Messages - Flask Templates Demo{% endblock %}

{% block content %}
<h2>Flash Messages Demo</h2>

<div class="row">
    <div class="col-md-6">
        <h3>Send Flash Messages</h3>
        <form method="POST">
            <div class="mb-3">
                <label for="message" class="form-label">Message:</label>
                <input type="text" class="form-control" id="message" name="message" required>
            </div>
            <div class="mb-3">
                <label for="category" class="form-label">Category:</label>
                <select class="form-select" id="category" name="category">
                    <option value="info">Info</option>
                    <option value="success">Success</option>
                    <option value="warning">Warning</option>
                    <option value="error">Error</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Send Flash Message</button>
        </form>
        
        <div class="mt-4">
            <h4>Quick Actions</h4>
            <a href="{{ url_for('flash_demo', action='success') }}" class="btn btn-success">Success Message</a>
            <a href="{{ url_for('flash_demo', action='error') }}" class="btn btn-danger">Error Message</a>
            <a href="{{ url_for('flash_demo', action='warning') }}" class="btn btn-warning">Warning Message</a>
        </div>
    </div>
    
    <div class="col-md-6">
        <h3>About Flash Messages</h3>
        <p>Flash messages are temporary messages that are stored in the session and displayed to the user on the next request.</p>
        <p>They are commonly used to display:</p>
        <ul>
            <li>Success notifications after form submissions</li>
            <li>Error messages</li>
            <li>Warning information</li>
            <li>General information</li>
        </ul>
        <p>Flash messages are automatically cleared after being displayed once.</p>
    </div>
</div>

<div class="mt-4">
    <h3>How Flash Messages Work</h3>
    <ol>
        <li>In the view function, call <code>flash('message', 'category')</code></li>
        <li>Redirect to another page (typically)</li>
        <li>In the template, use <code>{% raw %}{% with messages = get_flashed_messages() %}{% endraw %}</code> to retrieve messages</li>
        <li>Display messages to the user</li>
        <li>Messages are automatically cleared from the session</li>
    </ol>
</div>
{% endblock %}